<template>
 <div class="calling-pop">
  <div class="call-pop-up">
    <div class="caller-avatar">
      <img :src="caller.avatar"/>
    </div>
    <div class="caller-name">
      {{ caller.nickname }}
    </div>
  </div>
  <div class="call-pop-down">
    <div class="call-reject"  @click="reject">
      <font-awesome-icon icon="fas fa-phone-slash"/> <span>{{time}}s</span>
    </div>
    <div class="call-agree" @click="agree">
      <font-awesome-icon icon="fas fa-phone-volume"/>
    </div>
  </div>
 </div>
</template>


<script>
export default {
  name: "CallingPop",
  inject: ['callCommand'],
  props: {
    'call': {
      type: Object
    },
    'handleCallRing':{
      type: Function
    }
  },
  data(){
    return {
      caller: this.call.caller,
      time: 30,
      timer: null
    }
  },
  methods: {
    countdownClose(){
      this.timer = setInterval(() => {
        this.time--;
        if (this.time <= 0) {
          clearInterval(this.timer);
          this.handleCallRing(this.call , this.callCommand.reject);
        }
      }, 1000);
    },
    async agree(){
      await this.handleCallRing(this.call , this.callCommand.agree);
    },
    reject(){
      this.handleCallRing(this.call , this.callCommand.reject);
    }
  },
  mounted() {
    this.countdownClose();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },

}
</script>


<style scoped>
.calling-pop{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
}

.call-pop-up{
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: row;
  border-radius: 30px 30px 0 0;
}

.caller-name{
  font-size: 12px;
  color: #fffff1;
  margin-left: 5px;
  overflow: hidden;
}

.call-pop-down{
  width: 100%;
  height: 50%;
  display: flex;
  flex-direction: row;
  border-radius: 0 0 20px 20px;
}

.caller-avatar{
  overflow: hidden;
  margin-left: 15px;
  margin-top: 1px;
  padding: 2px;
}

.caller-avatar img{
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.call-reject , .call-agree{
  width: 50%;
  height: calc(98%- 2px);
  margin-top: 2px;
  cursor: pointer;
}

.call-reject{
  color: red;
  border-radius: 0 0 0 20px;
}

.call-reject span{
  font-size: 12px;
}

.call-agree{
  color: #4CAF50;
  border-radius: 0 0 20px 0;
}

.call-agree:hover , .call-reject:hover{
  background: rgba(255, 255, 255, 0.12);
}
</style>